<template>
    <div>
        <div class="header">
            <div id="scort" class="header-wrapper" :style="{ '--width': widthItem, '--left': parseFloat(widthItem) * indexAcater + unit }">
                <div @click="handTab($event,index, data)" :style="{'min-width': widthItem}" :class="indexAcater === index ? 'avater' : ''" 
                    class="header-wrap" v-for="(data, index) in dataList" :key="index">{{ data[name] }}</div>
            </div>
        </div>
        <div class="content">
            <div class="content-wrap" v-for="(data,index) in dataList" :key="index" :style="{'left': 100 * index + '%'}">
                <div class="content-wrapper" :style="{left: -(indexAcater * 100) + '%'}">
                    <template>
                        <slot :name="index"></slot>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // sloat 插槽名称使用的index
    export default {
        props: {
            /**
             * dataList数组对象,
             * name：tab名称
             */
            dataList: {
                type: Array,
                default: []
            },
            /**
             * width：tab的宽
             * 可以使用的单位vw,px,rem,%
             */
            width: {
                type: String,
                default: '70px'
            },
            /**
             * 显示的字段名称
             */
            name: {
                type: String,
                default: 'cate_name'
            },
            avaterInt: {
                type: Number,
                default: 0
            },
            id: {
                type: Number
            },
            idName: {
                type: String,
                default: 'id'
            }
        },
        data() {
            return {
                unit: 'px',
                indexAcater: 0,
                widthItem: 0,
            }
        },
        mounted() {
            setTimeout(() => {
                this.init();
            },500);
        },
        methods: {
            init() {
                if (this.dataList.length <= 4) {
                    this.widthItem = 100 / this.dataList.length + '%';
                } else {
                    this.widthItem = this.width;
                }
                if (this.widthItem.indexOf('%') > -1) {
                    this.unit = '%';
                }
                if (this.widthItem.indexOf('px') > -1) {
                    this.unit = 'px';
                }
                if (this.widthItem.indexOf('rem') > -1) {
                    this.unit = 'rem';
                }
                if (this.widthItem.indexOf('vw') > -1) {
                    this.unit = 'vw';
                }
                if (this.id && this.idName) {
                    this.dataList.forEach((item, index) => {
                        if (parseFloat(item[this.idName]) === parseFloat(this.id)) {
                            this.indexAcater = index;
                            return;
                        }
                    });
                } else {
                    this.indexAcater = this.avaterInt;
                }
            },
            /**
             * 点击tab
             */
            handTab(e,index, data) {
                document.querySelector('#scort').scrollTo(parseInt(e.target.offsetLeft / 1.5), 0);
                this.indexAcater = index;
                this.$emit('tab', e, index, data);
            }
        }
    }
</script>

<style scoped>
    .header {
        border-bottom: 1px solid rgb(244,244,244);
    }
    .header-wrapper {
        width: 90%;
        margin: 0 auto;
        display: flex;
        overflow-x: auto;
        height: 6vh;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
        position: relative;
    }
    .header-wrapper::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: var(--left);
        width: var(--width);
        height: 2px;
        background: rgb(110,70,138);
        transition: all .2s;
    }
    .header-wrap {
        height: 100%;
        min-width: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgb(120,120,120);
    }
    ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
    .avater {
        color: rgb(110,70,138);
    }

    .content {
        width: 100%;
        position: relative;
        overflow-x: hidden;
        height: 94vh;
    }
    .content-wrap {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .content-wrapper {
        transition: all .2s;
        position: relative;
        left: -100%;
    }
</style>